<template>
  <el-table :data="tableData">
    <el-table-column label="#"
                     type="index" />
    <el-table-column prop="code"
                     label="合同编号"></el-table-column>
    <el-table-column prop="fromTime"
                     label="发货时间"></el-table-column>
    <el-table-column prop="toTime"
                     label="要求到货时间"></el-table-column>
    <el-table-column label="发货方信息">
      <template slot-scope="scope">
        <div class="column-flx">
          <div class="p-box">
            <p>{{ scope.row.corp }}</p>
            <p v-if="scope.row.showFullText">{{ scope.row.name }} {{ scope.row.iphone }}</p>
            <p v-if="scope.row.showFullText">{{ scope.row.addresss }}</p>
          </div>
          <el-button v-if="!scope.row.showFullText"
                     class="btn-text"
                     type="text"
                     @click="handleShowFullText(scope.row)">显示更多</el-button>
          <el-button v-else
                     class="btn-text"
                     type="text"
                     @click="handleShowFullText(scope.row)">收起</el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="收货方信息">
      <template slot-scope="scope">
        <div class="p-box">
          <p>{{scope.row.corp}}</p>
          <p>{{scope.row.name}} {{ scope.row.iphone }}</p>
          <p>{{scope.row.addresss}}</p>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Column2',
  data () {
    return {
      tableData: [
        {
          code: 'O20230605T180145',
          fromTime: '2028-03-06 23:59',
          toTime: '2028-03-16 23:59',
          corp: '上海盛研化工科技有限公司',
          name: '张三',
          iphone: '138888888888',
          addresss: '湖南怀化麻阳苗族自治县 批发市场1685959037023',
          showFullText: false
        },
        {
          code: 'O20230605T180145',
          fromTime: '2028-03-06 23:59',
          toTime: '2028-03-16 23:59',
          corp: '上海盛研化工科技有限公司',
          name: '张三',
          iphone: '138888888888',
          addresss: '湖南怀化麻阳苗族自治县 批发市场1685959037023',
          showFullText: false
        }
      ],
      showFullText: false
    }
  },
  methods: {
    handleShowFullText (row) {
      row.showFullText = !row.showFullText;
    }
  }
}
</script>

<style scoped>
.btn-text {
  padding: 0;
  font-size: 12px;
}
p {
  padding: 0px !important;
  margin: 0;
}
</style>